<html>
<head>
<script type="text/javascript">
// my storage
var STORAGE = chrome.extension.getBackgroundPage().STORAGE;

// logging
function log(txt) {
   console.log(txt);
}

function add() {
        log("add");     	     
	STORAGE.addTickleTab(document.getElementById("key").value, document.getElementById("val").value, document.getElementById("title").value);
	updateContent();
}
function remove() {
	log("remove");
	STORAGE.removeTickleTabs(document.getElementById("key").value, document.getElementById("val").value);
	updateContent();
}
function removeByKey() {
	log("remove by key");
	STORAGE.removeTickleTabs(document.getElementById("key").value);
	updateContent();
}
function update() {
        log("update");     	     
	STORAGE.addTickleTab(document.getElementById("key").value, document.getElementById("val").value, document.getElementById("title").value);
	updateContent();
}
function updateContent(a) {
	log("updateContent(" + a + ")");
        if ( a == null ) {
          a = STORAGE.getAllTickleTabs();
        }
        
	var t = "";
	
	for(var i = 0, l = a.length; i < l; i++ ) {
		var x = a[i];
		t += x.key + " -> " + JSON.stringify(x);
		t += "<br/>";
	}
	
	if (t == "") {
		document.getElementById("content").innerHTML = "empty content";
	} else {
		document.getElementById("content").innerHTML =  t;
	}
}
function clearLocalStorage() {
	STORAGE.clear();
	updateContent();
}
function getTickleTabs() {
	var k = document.getElementById("key").value;
	if (k == "") {
		updateContent();
	} else {
		var x = STORAGE.getTickleTabs(k);
		if (x == null) {
			document.getElementById("content").innerHTML =  "empty content";
		} else {
			updateContent(x);
		}
	}
}

</script>
</head>
<body onload="updateContent()">
	<table>
	<tr>
	<td>Key: <input type="text" id="key"/></td>
	<td>Url: <input type="text" id="val"/></td>
	<td>Title: <input type="text" id="title"/></td>
	</tr>
	<tr><td colspan="3"><a href="javascript:add();">Add</a> 
	                    <a href="javascript:update();">Update</a> 
		            <a href="javascript:remove();">Remove</a> 
		            <a href="javascript:removeByKey();">Remove by Key</a> 
	                    <a href="javascript:clearLocalStorage();">Clear Storage</a>
	                    <a href="javascript:getTickleTabs();">Get TickleTabs</a>
	     </td>
	</tr>
	</table>
	<div id="content"/>
</body>
</html>
